<template>
  <canvas :id="pipeId" class="arrow-box"></canvas>
</template>

<script>
export default {
  components: {},
  props: {
    pipeId: {
      type: String
    }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    const dom = document.getElementById(`${this.pipeId}`)
    const ctx = dom.getContext('2d')
    this.drawArrow(
      ctx,
      dom.width / 2,
      0,
      dom.width / 2,
      dom.height / 2 + 40,
      30,
      20,
      4,
      '#000'
    )
  },
  methods: {
    drawArrow (ctx, fromX, fromY, toX, toY, theta, headlen, width, color) {
      theta = typeof theta !== 'undefined' ? theta : 30
      headlen = typeof theta !== 'undefined' ? headlen : 10
      width = typeof width !== 'undefined' ? width : 1
      // eslint-disable-next-line valid-typeof
      color = typeof color !== 'color' ? color : '#000'

      // 计算各角度和对应的P2,P3坐标
      var angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI
      var angle1 = ((angle + theta) * Math.PI) / 180
      var angle2 = ((angle - theta) * Math.PI) / 180
      var topX = headlen * Math.cos(angle1)
      var topY = headlen * Math.sin(angle1)
      var botX = headlen * Math.cos(angle2)
      var botY = headlen * Math.sin(angle2)

      ctx.save()
      ctx.beginPath()

      var arrowX = fromX - topX
      var arrowY = fromY - topY

      ctx.moveTo(arrowX, arrowY)
      ctx.moveTo(fromX, fromY)
      ctx.lineTo(toX, toY)
      arrowX = toX + topX
      arrowY = toY + topY
      ctx.moveTo(arrowX, arrowY)
      ctx.lineTo(toX, toY)
      arrowX = toX + botX
      arrowY = toY + botY
      ctx.lineTo(arrowX, arrowY)
      ctx.strokeStyle = color
      ctx.lineWidth = width
      ctx.stroke()
      ctx.restore()
    }
  }
}
</script>
<style lang="scss" scoped>
.arrow-box {
  width: 100px;
  height: 40px;
  position: absolute;
  bottom: -40px;
  left: 0;
  z-index: 100;
}
</style>
